<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>侧边栏L3-个人中心-好友请求</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<!-- 引入字体 -->
	<script th:src="@{/js/libs/webfontloader.min.js}"></script>
	<script>
		WebFont.load({
			google: {
				families: ['Roboto:300,400,500,700:latin']
			}
		});
	</script>
	<!-- 引入bootstrap css -->
	<link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-reboot.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/Bootstrap/dist/css/bootstrap-grid.css}">
	<!-- 引入主要 css -->
	<link rel="stylesheet" type="text/css" th:href="@{/css/main.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/css/fonts.min.css}">
</head>
<body class="page-has-left-panels">
<!-- Preloader 预加载 -->
<div id="hellopreloader">
	<div class="preloader">
		<svg width="45" height="45" stroke="#fff">
			<g fill="none" fill-rule="evenodd" stroke-width="2" transform="translate(1 1)">
				<circle cx="22" cy="22" r="6" stroke="none">
					<animate attributeName="r" begin="1.5s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="6;22"/>
					<animate attributeName="stroke-opacity" begin="1.5s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="1;0"/>
					<animate attributeName="stroke-width" begin="1.5s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="2;0"/>
				</circle>
				<circle cx="22" cy="22" r="6" stroke="none">
					<animate attributeName="r" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="6;22"/>
					<animate attributeName="stroke-opacity" begin="3s" calcMode="linear" dur="3s"
							 repeatCount="indefinite" values="1;0"/>
					<animate attributeName="stroke-width" begin="3s" calcMode="linear" dur="3s" repeatCount="indefinite"
							 values="2;0"/>
				</circle>
				<circle cx="22" cy="22" r="8">
					<animate attributeName="r" begin="0s" calcMode="linear" dur="1.5s" repeatCount="indefinite"
							 values="6;1;2;3;4;5;6"/>
				</circle>
			</g>
		</svg>
		<div class="text">Loading ...</div>
	</div>
</div>
<!-- ... end Preloader 结束预加载-->

<!-- Fixed Sidebar Left 左侧菜单 -->
<div th:replace="common/sidebar_left :: sidebar"></div>
<!-- ... end Fixed Sidebar Left 结束左侧菜单-->

<!-- Header-BP 头部导航栏-->
<div th:replace="common/headNav :: headNav"></div>
<!-- ... end Header-BP 结束头部导航栏-->
<!--头部空间-->
<div class="header-spacer"></div>
<!--end头部空间-->

<!-- 个人中心好友请求主体 -->
<div class="container">
    <div class="row">
		<!--右侧-->
        <div class="col col-xl-9 order-xl-2 col-lg-9 order-lg-2 col-md-12 order-md-1 col-sm-12 col-12">
            <div class="ui-block">
                <div class="ui-block-title">
                    <h6 class="title">好友请求</h6>
                </div>
                <!-- 好友请求列表-->
                <ul class="notification-list friend-requests" th:each="ask : ${asks}">
					<!--单条好友请求-->
					<!--数据：陌生人头像、个人主页html地址、昵称-->
					<!-- 登录用户作为请求的接收者-->
                    <li th:if="${ask.receiverId} == ${session.user.getUserId()}">
                        <div class="author-thumb">
                            <img style="width: 42px; height: 42px;" src="../static/img/avatar1-sm.jpg" alt="陌生人"
								 th:src="@{${ask.sender.headPhoto}}">
                        </div>
                        <div class="notification-event">
                            <a href="#" class="h6 notification-friend" th:text="${ask.sender.uname}">Tamara Romanoff</a>
                        </div>
						<!--state = 0 代表请求消息未读-->
						<span class="notification-icon" th:if="${ask.state} == 0">
							<!--事件：接受好友请求-->
							<form th:action="@{/friendAsk/requestDeal}" th:method="get">
								<input type="hidden" name="senderId" value="" th:value="${ask.sender.userId}" />
								<input type="hidden" name="receiverId" value="" th:value="${session.user.getUserId()}" />
								<input type="hidden" name="result" value="" th:value="1" />
								<button class="accept-request" type="submit">
									<span class="icon-add">
										<svg class="olymp-happy-face-icon">
											<use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"
											th:href="@{/svg-icons/sprites/icons.svg#olymp-happy-face-icon}"></use>
										</svg>
									</span>接受
								</button>
							</form>
							<!--拒绝好友请求-->
							<form th:action="@{/friendAsk/requestDeal}" th:method="get">
								<input type="hidden" name="senderId" value="" th:value="${ask.sender.userId}" />
								<input type="hidden" name="receiverId" value="" th:value="${session.user.getUserId()}" />
								<input type="hidden" name="result" value="" th:value="0" />
								<button class="accept-request request-del" type="submit">
									<span class="icon-minus">
										<svg class="olymp-happy-face-icon">
											<use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"
											th:href="@{/svg-icons/sprites/icons.svg#olymp-happy-face-icon}"></use>
										</svg>
									</span>&nbsp;&nbsp;&nbsp;&nbsp;拒绝
								</button>
							</form>
						</span>
						<!--state = 1 代表请求已读， 需要知道已读消息是否接受或拒绝-->
						<span class="notification-icon" th:if="${ask.state} == 1">
							<!--事件：接受好友请求-->
							<form th:if="${ask.result} == 1">
								<input type="hidden" name="senderId" value="" th:value="${ask.sender.userId}" />
								<input type="hidden" name="receiverId" value="" th:value="${session.user.getUserId()}" />
								<input type="hidden" name="result" value="" th:value="1" />
								<button class="accept-request" type="submit">
									<span class="icon-add">
										<svg class="olymp-happy-face-icon">
											<use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"
												 th:href="@{/svg-icons/sprites/icons.svg#olymp-happy-face-icon}"></use>
										</svg>
									</span>已同意
								</button>
							</form>
							<!--拒绝好友请求-->
							<form th:if="${ask.result} == 0">
								<input type="hidden" name="senderId" value="" th:value="${ask.sender.userId}" />
								<input type="hidden" name="receiverId" value="" th:value="${session.user.getUserId()}" />
								<input type="hidden" name="result" value="" th:value="0" />
								<button class="accept-request request-del" type="submit">
									<span class="icon-minus">
										<svg class="olymp-happy-face-icon">
											<use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"
												 th:href="@{/svg-icons/sprites/icons.svg#olymp-happy-face-icon}"></use>
										</svg>
									</span>&nbsp;&nbsp;&nbsp;&nbsp;已拒绝
								</button>
							</form>
						</span>

                    </li>
					<!--结束单条好友请求-->

					<!-- 登录用户作为请求的发送者
					   显示好友发送请求的一个状态（已同意，已拒接）
					-->
					<li th:if="${ask.senderId} == ${session.user.getUserId()}">
						<div class="author-thumb">
							<img style="width: 42px; height: 42px;" src="../static/img/avatar1-sm.jpg" alt="陌生人"
								 th:src="@{${ask.receiver.headPhoto}}">
						</div>
						<div class="notification-event">
							<a href="#" class="h6 notification-friend" th:text="${ask.receiver.uname}">Tamara Romanoff</a>
						</div>
						<span class="notification-icon">
							<!--事件：接受好友请求th:action="@{/friendAsk/requestDeal}" th:method="get"-->
							<form th:if="${ask.result} == 1">
								<button class="accept-request" type="submit">
									<span class="icon-add">
										<svg class="olymp-happy-face-icon">
											<use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"
												 th:href="@{/svg-icons/sprites/icons.svg#olymp-happy-face-icon}"></use>
										</svg>
									</span>已同意
								</button>
							</form>
							<form th:if="${ask.result} == 2">
								<button class="accept-request" type="submit">
									<span class="icon-add">
										<svg class="olymp-happy-face-icon">
											<use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"
												 th:href="@{/svg-icons/sprites/icons.svg#olymp-happy-face-icon}"></use>
										</svg>
									</span>等待应答
								</button>
							</form>


							<form th:if="${ask.result} == 0">
								<button class="accept-request request-del" type="submit">
									<span class="icon-minus">
										<svg class="olymp-happy-face-icon">
											<use xlink:href="../static/svg-icons/sprites/icons.svg#olymp-happy-face-icon"
												 th:href="@{/svg-icons/sprites/icons.svg#olymp-happy-face-icon}"></use>
										</svg>
									</span>&nbsp;&nbsp;&nbsp;&nbsp;已拒绝
								</button>
							</form>
						</span>
					</li>
					<!--结束单条好友请求-->

                </ul>
                <!-- end好友请求列表 -->
            </div>
        </div>
		<!--结束右侧-->

		<!--左侧-->
		<div class="col col-xl-3 order-xl-1 col-lg-3 order-lg-1 col-md-12 order-md-2 col-sm-12 col-12 responsive-display-none">
			<!--个人中心选择项-->
			<div class="ui-block">
				<div class="your-profile">
					<div class="ui-block-title ui-block-title-small">
						<h6 class="title">个人中心</h6>
					</div>
					<div class="ui-block-title">
						<a href="05-PersonDetail.html" th:href="@{/personDetail}" class="h6 title">个人资料</a>
					</div>
					<!--数据：通知数、聊天消息、好友请求数-->
					<!--					&lt;!&ndash;不显示就注释掉&ndash;&gt;-->
					<!--                    <div class="ui-block-title">-->
					<!--                        <a href="05-PersonDetail-Notifications.html" class="h6 title">通知</a>-->
					<!--                        &lt;!&ndash;<a href="05-PersonDetail-Notifications.html" class="items-round-little bg-primary">2</a>&ndash;&gt;-->
					<!--                    </div>-->
					<div class="ui-block-title">
						<a href="05-PersonDetail-ChatMessages.html" th:href="@{/chat}" class="h6 title">聊天消息</a>
					</div>
					<div class="ui-block-title">
						<a href="05-PersonDetail-FriendsRequests.html"
						   th:href="@{/friendAsk/findByReceiverId(receiverId=${session.user.getUserId()})}" class="h6 title">好友请求</a>
						<!--<a href="05-PersonDetail-FriendsRequests.html" class="items-round-little bg-blue">4</a>-->
					</div>
<!--					<div class="ui-block-title">-->
<!--						<a href="05-PersonDetail-FriendsDel.html" class="h6 title"-->
<!--						th:href="@{}">好友管理</a>-->
<!--						&lt;!&ndash;<a href="05-PersonDetail-FriendsRequests.html" class="items-round-little bg-blue">4</a>&ndash;&gt;-->
<!--					</div>-->
				</div>
			</div>
			<!--end个人中心选择项-->
		</div>
		<!--结束左侧-->
    </div>
</div>
<!-- end 个人中心好友请求主体 -->
<!--向上返回 按钮-->
<a class="back-to-top" href="#">
    <img th:src="@{/svg-icons/back-to-top.svg}" alt="arrow" class="back-icon">
</a>
<!-- JS Scripts -->
<script th:src="@{/js/jQuery/jquery-3.4.1.js}"></script>
<script th:src="@{/js/libs/jquery.appear.js}"></script>
<script th:src="@{/js/libs/jquery.mousewheel.js}"></script>
<script th:src="@{/js/libs/perfect-scrollbar.js}"></script>
<script th:src="@{/js/libs/jquery.matchHeight.js}"></script>
<script th:src="@{/js/libs/svgxuse.js}"></script>
<script th:src="@{/js/libs/imagesloaded.pkgd.js}"></script>
<script th:src="@{/js/libs/Headroom.js}"></script>
<script th:src="@{/js/libs/velocity.js}"></script>
<script th:src="@{/js/libs/ScrollMagic.js}"></script>
<script th:src="@{/js/libs/jquery.waypoints.js}"></script>
<script th:src="@{/js/libs/jquery.countTo.js}"></script>
<script th:src="@{/js/libs/popper.min.js}"></script>
<script th:src="@{/js/libs/material.min.js}"></script>
<script th:src="@{/js/libs/bootstrap-select.js}"></script>
<script th:src="@{/js/libs/smooth-scroll.js}"></script>
<script th:src="@{/js/libs/selectize.js}"></script>
<script th:src="@{/js/libs/swiper.jquery.js}"></script>
<script th:src="@{/js/libs/isotope.pkgd.js}"></script>
<script th:src="@{/js/libs/ajax-pagination.js}"></script>
<script th:src="@{/js/libs/circle-progress.js}"></script>
<script th:src="@{/js/libs/loader.js}"></script>
<script th:src="@{/js/libs/run-chart.js}"></script>
<script th:src="@{/js/libs/jquery.magnific-popup.js}"></script>
<script th:src="@{/js/libs/ion.rangeSlider.js}"></script>

<script th:src="@{/js/main.js}"></script>
<script th:src="@{/js/libs-init/libs-init.js}"></script>
<script defer th:src="@{/fonts/fontawesome-all.js}"></script>

<script th:src="@{/Bootstrap/dist/js/bootstrap.bundle.js}"></script>

</body>
</html>